<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'View '+${product.name}">$Title$</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<body>
<div th:replace="common/IncludeTop::header"></div>
<div id="Content">

    <div id="BackLink">
        <a th:href="@{viewCategory(categoryId=${product.categoryId})}"
           th:text="'Return to '+ ${product.categoryId}">Return to ${sessionScope.product.categoryId}</a>
    </div>
    <br>
    <div id="Catalog">
        <div>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#Catalog").hide().fadeIn();
                });
            </script>
        </div>
        <h2 th:text="${product.name}">${sessionScope.product.name}</h2>

        <table>
            <tr>
                <th>Item ID</th>
                <th>Product ID</th>
                <th>Description</th>
                <th>List Price</th>
                <th>&nbsp;</th>
            </tr>
            <tr th:each="item:${itemList}">
                <td>
                    <a th:href="@{viewItem(itemId=${item.itemId})}"
                       th:text="${item.itemId}">${item.itemId}</a>
                </td>
                <td th:text="${item.product.productId}">
                    ${item.product.productId}
                </td>
                <td th:text="
                (${item.attribute1}?${item.attribute1}:'')+' '+
                (${item.attribute2}?${item.attribute2}:'')+' '+
                (${item.attribute3}?${item.attribute3}:'')+' '+
                (${item.attribute4}?${item.attribute4}:'')+' '+
                (${item.attribute5}?${item.attribute5}:'')+' '+
                ${product.name}">
                    ${item.attribute1} ${item.attribute2} ${item.attribute3}
                    ${item.attribute4} ${item.attribute5} ${sessionScope.product.name}
                </td>
                <td th:with="number=${item.listPrice}" th:text="'$'+${#numbers.formatDecimal(number, 1, 'COMMA', 2, 'POINT')}">
                    ${item.listPrice}
                </td>
                <td>
                    <a class="Button" th:href="@{/cart/addItemToCart(workingItemId=${item.itemId})}">Add to Cart</a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>